import React, {Component} from 'react'
import { connect } from 'react-redux'
import { 
    fetchBookIntro,
    fetchBookComment 
} from '../redux/actions/actions'
import BookIntro from '../components/BookIntro'
import Loading from '../components/Loading'
class BookIntroContainer extends Component {
  componentWillMount(){
    const {match} = this.props
    this.props._getBookIntro(match.params.id);
    this.props._getBookComment(match.params.id);
  }
  render(){
    const {detail,comment,isShow} = this.props
    return (
    <div className="introWrap">
        <BookIntro
        detail={detail}
        comment={comment.comments}/>
        <Loading
        isShow={isShow}/>
    </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    detail: state.bookIntro,
    comment:state.bookComment,
    isShow:state.bookIntro.isShow
  }
}
const mapDispatchToProps = (dispatch)=>{
  return {
    _getBookIntro:(id)=>{
        dispatch(fetchBookIntro(id))
    },
    _getBookComment:(id)=>{
        dispatch(fetchBookComment(id))
    }
  }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(BookIntroContainer)